﻿@using RuoVea.WeighIns.Web.Options
@using Microsoft.Extensions.Options
@using RuoVea.ExDto
@inject IOptionsMonitor<SystemInfo> systemInfo;
@inject ICurrentUser _currentUser
@{
    bool isAdmin = User?.Claims.Any(c => c.Type == ClaimConst.CLAINM_ISADMIN && c.Value == "true") ?? false;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@systemInfo.CurrentValue.Title</title>
    <link href="~/elementui/index.min.css?v=1" rel="stylesheet" asp-append-version="true" />
    <style type="text/css">.el-menu-item i, .el-submenu i {color: @systemInfo.CurrentValue.SkinColor}.el-menu--horizontal > .el-menu-item.is-active {color: @systemInfo.CurrentValue.SkinColor !important;}</style>
</head>
<body>
    <div id="app" v-cloak>
        <el-admin logo_url="/img/logo.png"
                  default-skin='default'
                  :skin-options="['default', 'dark', 'light', 'tech']"
                  title="@systemInfo.CurrentValue.Title"
                  :menu-data="menuData"
                  v-bind:user="user"
                  user-name="@_currentUser.Name"
                  user-avatar="./img/logo.png"
                  :show-breadcrumb="true"
                  :menu-items="dropList"
                  :tagselect="tagselect"
                  :handle-select="handleSelect"
                  :show-tags="false"
                  v-on:handle-edit-pass=""
                  :drop-list="dropList"
                  :handle-logout="logout">
            <div slot="content">
                <iframe ref="iframe" :src="tagselect" style="width:100%;"></iframe>
            </div>
        </el-admin>
        <el-dialog :title="i18n.t('myProfile')" :visible.sync="profileDialogVisible" width="400px" class="profile-dialog">
            <el-form :model="userForm" label-width="100px" class="view-only">
                <el-form-item :label="i18n.t('username')"><span>{{ userForm.account }}</span></el-form-item>
                <el-form-item :label="i18n.t('fullName')"><span>{{ userForm.realName }}</span></el-form-item>
                <el-form-item :label="i18n.t('email')"><span>{{ userForm.email }}</span></el-form-item>
                <el-form-item :label="i18n.t('phone')"><span>{{ userForm.phone }}</span></el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :title="i18n.t('changePassword')" :visible.sync="passwordDialogVisible" width="500px" class="password-dialog">
            <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
                <el-form-item :label="i18n.t('currentPassword')" prop="currentPassword">
                    <el-input v-model="passwordForm.currentPassword" type="password" :placeholder="i18n.t('enterCurrentPassword')" size="mini"></el-input>
                </el-form-item>
                <el-form-item :label="i18n.t('newPassword')" prop="newPassword">
                    <el-input v-model="passwordForm.newPassword" type="password" :placeholder="i18n.t('enterNewPassword')" size="mini"></el-input>
                </el-form-item>
                <el-form-item :label="i18n.t('confirmPassword')" prop="confirmPassword">
                    <el-input v-model="passwordForm.confirmPassword" type="password" :placeholder="i18n.t('reEnterNewPassword')" size="mini"></el-input>
                </el-form-item>
            </el-form>
            <div class="form-footer" style="text-align: right;">
                <el-button @@click="passwordDialogVisible = false" size="mini">{{i18n.t('cancel')}}</el-button>
                <el-button type="primary" @@click="changePassword" :loading="passwordLoading" size="mini">{{i18n.t('confirmChange')}}</el-button>
            </div>
        </el-dialog>
    </div>
    <script src="~/vue/vue.js"></script>
    <script src="~/elementui/index.i18n.js"></script>
    <script src="~/elementui/index.lang.js"></script>
    <script src="~/elementui/index.min.js"></script>
    <script src="~/elementui/lang/zhCN.js"></script>
    <script src="~/elementui/lang/en.js"></script>
    <script src="~/elementui/lang/fr.js"></script>
    <script src="~/elementui/lang/ja.js"></script>
    <script src="~/elementui/lang/vi.js"></script>
    <script src="~/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "";</script>
    <script src="~/vue/axios.min.min.js"></script>
    <script src="~/vue/vue-i18n.min.js"></script>
    <script src="~/avue/avue.min.js"></script>
    <script src="~/avue/avue.min.option.js"></script>
    <script src="~/lang/locale/enUS.js"></script>
    <script src="~/lang/locale/frFR.js"></script>
    <script src="~/lang/locale/jaJP.js"></script>
    <script src="~/lang/locale/viVN.js"></script>
    <script src="~/lang/locale/zhCN.js"></script>
    <script src="~/lang/locale/zhTW.js"></script>
    <script src="~/lang/index.min.js"></script>

    <script src="~/js/menu.js"></script>
    <script>
        var $taskVue = new Vue({
            el: "#app",
            data() {
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error(`${Vue.prototype.i18n.t('reEnterPassword')}`));
                    } else if (value !== this.passwordForm.newPassword) {
                        callback(new Error(`${Vue.prototype.i18n.t('passwordNotMatch')}`));
                    } else {
                        callback();
                    }
                };
                return {
                    isAdmin: @(isAdmin.ToString().ToLower()),
                    showBreadcrumb: false,
                    showTags: true,
                    selectedTag: {},
                    menuData: [],
                    defultIndex: "",
                    tagselect: "",
                    user: { username: '@_currentUser.Name',avatar: '/img/logo.png' },

                    profileDialogVisible: false,
                    passwordDialogVisible: false,
                    passwordLoading: false,
                    userForm: {
                        account: '',
                        realName: '',
                        email: '',
                        phone: '',
                    },
                    passwordForm: {
                        currentPassword: '',
                        newPassword: '',
                        confirmPassword: ''
                    },
                    passwordRules: {
                        currentPassword: [
                            { required: true, message: `${Vue.prototype.i18n.t('enterCurrentPassword')}`, trigger: 'blur' }
                        ],
                        newPassword: [
                            { required: true, message:`${Vue.prototype.i18n.t('enterNewPassword')}`, trigger: 'blur' },
                            { min: 6, message: `${Vue.prototype.i18n.t('passwordMinLength')}`, trigger: 'blur' }
                        ],
                        confirmPassword: [
                            { required: true, validator: validatePass,   trigger: 'blur' }
                        ]
                    },
                    dropList:[
                        { title: `${Vue.prototype.i18n.t('myProfile')}`, click: () => { this.showProfileDialog(); } },
                        { title: `${Vue.prototype.i18n.t('changePassword')}`, click: () => { this.showPasswordDialog(); } },
                        { title:  `${Vue.prototype.i18n.t('logout')}`, click: () => { this.logout(); } }
                          ],
                }
            },
            created() {
                this.loadMenu();
            },
            methods: {
                loadMenu() {
                   if (this.isAdmin) {
                        this.menuData = menuDataAdmin;
                        this.defultIndex = "/user/index";
                        this.activeIndex =this.defultIndex;
                    }
                    else {
                         this.menuData = menuDataNone;
                        this.defultIndex = "/dashboard";
                        this.activeIndex =this.defultIndex;
                    }
                    this.tagselect =this.defultIndex;
                    // 远程加载菜单
                    // this.$http.get("/user/Menu").then((res) => {
                    //     this.menuData = this.transformData(res);
                    // });
                },
                showProfileDialog() {
                    this.$http.get("/user/baseinfo").then((res) => {
                        this.userForm = res;
                        this.profileDialogVisible = true;
                    });
                },
                showPasswordDialog() {
                    this.passwordDialogVisible = true;
                    if (this.$refs.passwordForm) {
                        this.$refs.passwordForm.resetFields();
                    }
                },
                changePassword() {
                    this.$refs.passwordForm.validate((valid) => {
                        if (valid) {
                            this.passwordLoading = true;
                            var data={passwordOld:this.passwordForm.currentPassword,passwordNew:this.passwordForm.newPassword,}
                            this.$http.post("/user/changepwd",data).then((res) => {
                                 this.passwordLoading = false;
                                if(res){
                                    this.$message({message:`${Vue.prototype.i18n.t('passwordChangeSuccess')}`,type: 'success'});
                                    this.userForm = res;
                                    this.passwordDialogVisible = false;
                                }else{
                                    this.$message({message: res.message,type: 'error'});
                                }
                            })
                        } else {
                            return false;
                        }
                    });
                },
                transformData(data) {
                    function processNode(node) {
                        function pathRepalce(path) {
                            switch (path) {
                                case '/menu': return `${path}/index`;
                                case '/user': return `${path}/index`;
                                case '/role': return `${path}/index`;
                                case '/config': return `${path}/index`;
                                case '/logvis': return `${path}/index`;
                                case '/logop': return `${path}/index`;
                                case '/exlog': return `/logex/index`;
                                case '/difflog': return `/logdiff/index`;
                                case '': return  this.defultIndex;
                                case '/': return  this.defultIndex;
                                case '/home': return  this.defultIndex;
                                default:return path;
                            }
                        }
                        const path = pathRepalce(node.path)
                        return {
                            title: node.title,
                            path: `${path}`,
                            icon: (node.icon || "el-icon-menu"),
                            submenu: node.children.map(child => processNode(child))
                        };
                    }

                    return data.map(item => processNode(item));
                },
                adjustIframeHeight() {
                    const iframe = this.$refs.iframe;
                    if (iframe) {
                        const newHeight = window.innerHeight - 125;
                        iframe.style.minHeight = `${newHeight}px`;
                        iframe.style.border = 'none';
                    }
                },
                handleSelect(key, keyPath) {
                    if (keyPath) {
                        this.tagselect = keyPath.path;
                    } else {
                        this.tagselect = this.defultIndex;
                    }
                },
                logout() {
                    console.log('Logging out...');
                    window.location.href = "/auth/logout";
                },
            },
            mounted() {
                this.adjustIframeHeight();
                window.addEventListener('resize', this.adjustIframeHeight);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.adjustIframeHeight);
            },
        });
    </script>
</body>
</html>
